<template>
  <div>
    <!-- 选择类型 -->
    <typeSelect :typeList="typeList" @selectType="selectType"></typeSelect>

    <!--  -->
    <div class="topInput">
      <van-field
        v-model="valueForSearch"
        placeholder="请填写内容"
        left-icon="search"
        :clearable="true"
      />
    </div>
    <!-- 信息详情 -->
    <homeData
      v-for="item in houseList"
      :key="item.rentId"
      :homeData="item"
      @click="goto(item)"
    ></homeData>

    <!-- 吸底按钮 -->
    <bottomBtn :btn="btns"></bottomBtn>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import homeData from "@/components/homeData/index.vue";
import bottomBtn from "@/components/bottomBtn/index.vue";
import typeSelect from "@/components/typeSelect/index.vue";
import { useRouter } from "vue-router";
import rentalApi from "@/api/rental.js";
import { useUserStore } from "@/stores/user";

const userStore = useUserStore();
const router = useRouter();
const HomeType = ref(1);
const typeList = ref([
  {
    name: "房屋出租",
    type: 1,
  },
  {
    name: "租客信息",
    type: 2,
  },
]);
const btns = ref({
  name: "房屋填报+",
  color: "#409EFE",
  toPath: "tenantHouse",
});
//
const houseList = ref();
const valueForSearch = ref("");

const goto = (item) => {
  // console.log('item', item);
  if (btns.value.name == "房屋填报+") {
    router.push({
      path: "/rentalDetail",
      query: {
        rentId: item.rentId,
      },
    })
  } else if (btns.value.name == "租客信息录入+") {
    router.push({
      path: "/zkDetail",
      query: {
        tenantId: item.tenantId,
      },
    })
  }
}

watch(valueForSearch, (newval) => {
  btns.value.name == "房屋填报+" ? getDecorationList(newval) : getTtentList(newval);
});
//
/**
 * 获取出租房屋列表
 */
const getDecorationList = async (title) => {
  try {
    const res = await rentalApi.rental({
      createBy: userStore.userInfo.userId,
      title: title,
    });
    houseList.value = res.data.rows;
    houseList.value.forEach((item) => {
      item.houseImage = item.img.split(",");
    });
  } catch (error) {
    console.log(error);
  }
};
getDecorationList();

/**
 * 投诉信息
 */

const getTtentList = async (name) => {
  try {
    const res = await rentalApi.getTtentList({
      createBy: userStore.userInfo.userId,
      name: name,
    });
    houseList.value = res.data.rows;
    houseList.value.forEach((item) => {
      item.houseImage = item.img.split(",");
    });
  } catch (error) {
    console.log(error);
  }
};
// 切换type
const selectType = (type) => {
  try {
    houseList.value = [];
    type == 1 ? getDecorationList() : getTtentList();
    if (type == 1) {
      btns.value = {
        name: "房屋填报+",
        color: "#409EFE",
        toPath: "tenantHouse",
      };
    } else {
      btns.value = {
        name: "租客信息录入+",
        color: "#409EFE",
        toPath: "tenant",
      };
    }
  } catch (error) {}
};
</script>

<style lang="scss" scoped>
.selectType {
  .type {
    width: 162px;
    height: 60px;
    border-radius: 10px;
    background: linear-gradient(270deg, #f3f3f3 0%, #e5e5e5 95%);
    color: #666666;
    font-weight: 600;
  }
  .isType {
    background: linear-gradient(270deg, #eef7ff 0%, #bbdfff 100%);
    z-index: inherit;
    color: #222222;
  }
}
.goto {
  background: linear-gradient(270deg, #ffbca8 0%, #ffe9e3 98%);
  height: 80px;
  border-radius: 10px;
}
.brift {
  color: #999999;
}

.topInput {
  padding: 15px;
}

::v-deep .van-field {
  background-color: #fff !important;
  border-radius: 30px;
}
</style>
